<template>
	<div class="menu_auth_button">
		<div class="header">
			<h2>权限按钮</h2>
			<el-button size="small" type="primary">新增</el-button>
		</div>
		<div class="content">
			<template v-if="list.length > 0">
				<div class="item" v-for="(item, index) in list" :key="index">
					<h3>{{ item.name }}</h3>
					<el-button-group>
						<el-button type="text" @click="handleEditMenu(item)">编辑</el-button>
						<el-button type="text" @click="handledeleteMenu(item)">删除</el-button>
					</el-button-group>
				</div>
			</template>
			<el-empty v-else :image-size="120" description="暂无权限按钮"></el-empty>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		list: { type: Array, default: () => [] }
	},
	data() {
		return {
			buttonList: []
		};
	}
};
</script>

<style lang="scss" scoped>
.menu_auth_button::v-deep {
	display: flex;
	flex-direction: column;
	border-left: solid 1px #e4e7ed;
	width: 20%;
	min-width: 270px;
	flex-shrink: 0;
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 32px;
		padding: 16px;
		flex-shrink: 0;
		border-bottom: solid 1px #e4e7ed;
		h2 {
			font-size: 16px;
			font-weight: normal;
		}
	}
	.content {
		flex: 1;
		padding: 8px 16px;
		overflow: auto;
		&:has(.el-empty) {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 36px;
		h3 {
			font-size: 14px;
			font-weight: normal;
		}
		.el-button {
			padding: 10px 0;
			margin-left: 10px;
		}
	}
	.el-empty__description {
		color: #909399;
	}
}
</style>
